<template>
  <div id="app">
  <h3>按钮</h3>
    <!-- type颜色 -->
  <div class="row">
  <aa-button>按钮</aa-button>
  <aa-button type="success" draggable>成功</aa-button>
  <aa-button type="primary">主要</aa-button>
  <aa-button type="info">信息</aa-button>
  </div>
  <!--plain朴素按钮 -->
  <div class="row">
  <aa-button plain>按钮</aa-button>
  <aa-button type="success" plain>朴素按钮</aa-button>
  <aa-button type="primary" plain>朴素按钮</aa-button>
  <aa-button type="info" plain>朴素按钮</aa-button>
  </div>
  <!--round 圆角按钮 -->
  <div class="row">
  <aa-button round>按钮</aa-button>
  <aa-button type="success" round iconname="gouwucheguanli">圆角按钮</aa-button>
  <aa-button type="primary" round>圆角按钮</aa-button>
  <aa-button type="info" round>圆角按钮</aa-button>
  </div>
  <!-- cirle圆形按钮 -->
  <div class="row">
  <aa-button cirle iconname="gouwucheguanli"></aa-button>
  <aa-button type="success" iconname="liuyanguanli" cirle></aa-button>
  <aa-button type="primary" iconname="zhanghaoshezhi" cirle></aa-button>
  <aa-button type="info" iconname="mimaguanli" cirle></aa-button>
  </div>
  <!-- 禁用和拖拽 -->
  <div class="row">
  <aa-button type="success" plain disabled>禁用</aa-button>
  <aa-button type="primary" plain draggable>拖拽</aa-button>
  </div>
<hr>
<h3>dialog对话框</h3>
<aa-button @click="flagdialog" type="success">点击出现对话框</aa-button>
<aa-dialog :visible.sync="visible" width="60%" top="200px">
    <template v-slot:title>
    <p>这是具名插槽</p>
    </template>
    <template>
        这个内容啊
    </template>
    <template v-slot:footer>
         <aa-button>取消</aa-button>
         <aa-button type="primary">确定</aa-button>
    </template>
</aa-dialog>
<hr>
<h3>表单相关组件</h3>
<aa-input placeholder="请输入内容" disabeld></aa-input>
<aa-input placeholder="请输入内容" ></aa-input>
<aa-input placeholder="请输入内容" clearable v-model="value"></aa-input>
<aa-input placeholder="请输入内容"
showPassword
width="60%" right="43%" v-model="password"
iconname="guanbi"
type="password"></aa-input>
<hr>
<h3>字体图标组件</h3>
<aa-icon iconname="tupian"></aa-icon>
<aa-icon iconname="gouxuan"></aa-icon>
<hr>
<h3>开关组件</h3>
<aa-switch
v-model='value1'
></aa-switch>
<aa-switch
v-model='value2'
activeColor="green"
incativeColor="red"
@change="handlechange"
></aa-switch>

<hr>
<h3>radio单选框</h3>
<!-- 第一种:需要父组件传入label 和 v-model -->
<aa-radio label="0" v-model="gender">男</aa-radio>
<aa-radio label="1" v-model="gender">女</aa-radio>

<aa-radio label="0" v-model="sex"></aa-radio>
<aa-radio label="1" v-model="sex"></aa-radio>
<!-- 第二种:有个redio-group 实现单选组 ,给radio-group绑定v-model 在radio中设置label-->
<aa-radio-group v-model="sex">
    <aa-radio label="0"></aa-radio>
    <aa-radio label="1"></aa-radio>
</aa-radio-group>
<hr>
<!--复选框  -->
<aa-checkbox v-model="active">是不是选中</aa-checkbox>

<!-- 有group的复选框 -->
<checkbox-group v-model="hobby">
<aa-checkbox label="1"></aa-checkbox>
<aa-checkbox label="2"></aa-checkbox>
<aa-checkbox label="3"></aa-checkbox>
</checkbox-group>
<hr>
<!-- 表单组件 -->
<aa-form :model="model" width="100px">

<aa-form-item label="用户名">
<aa-input placeholder="请输入内容" v-model="model.username" ></aa-input>
</aa-form-item>

<aa-form-item label="开关">
<aa-switch
v-model='model.switch'
></aa-switch>
</aa-form-item>

</aa-form>

</div>

</template>

<script>

export default {
  name: 'App',
  components: {

  },
  data () {
    return {
      visible: false,
      value: '',
      value1: false,
      value2: false,
      password: '',
      gender: '0',
      sex: '1',
      active: false,
      hobby: ['1'],
      model: {
        username: '',
        switch: false

      }

    }
  },
  methods: {
    flagdialog () {
      this.visible = true
    },
    handelinput (value) {
      this.value = value
    },
    handlechange () {
      console.log(1)
    }

  }
}
</script>

<style lang="scss" scoped>
.row{
    margin-bottom:20px;
   .aa-button{
       margin-right:20px;
   }
}
</style>
